<template>

    <div class="app-container">
        <el-card class="box">
      <div class="container">
          <!-- 留言头部 -->
          <div class="comment-head">
            <CommentHead @add-comment="handleAddComment" :userInfo="userInfo" />
          </div>
          <div class="comment-list">
            <CommentItem ref="commentList" :userInfo="userInfo" :isAll="isAll" :type="type"/>
          </div>
      </div>
    </el-card>
    </div>
    </template>
    
    
    
    <script>
    import CommentHead from '@/components/comment/CommentHead.vue';
    import CommentItem from '@/components/comment/CommentItem.vue';
    import { addComment } from "@/api/comment/index.js"; // 导入两个接口
    import { useUserStore } from "@/store";
    export default {
      components: {
        CommentHead,
        CommentItem,
      },
      data() {
        return {
          commentData: [],
          rankingData: [], // 排行榜数据
          userInfo: null,
          isAll: 1,
          type: 1,
        };
      },
      created() {
        this.userInfo = useUserStore();
      },
      methods: {
        async handleAddComment(comment) {
        const commentsDTO = {
            fromId: this.userInfo.uid, // 需要替换为实际的用户学号
            content: comment,
            fromName: this.userInfo.username, // 可能需要根据实际情况调整
            type: 1 // 需要确定分区标识的实际值
        };
        console.log(commentsDTO)
        try {
            let data = await addComment(commentsDTO);
            if (!data.code) {
              // 调用子组件的方法来刷新评论列表
              this.$nextTick(() => {
              this.$refs.commentList.fetchComments();
            });
              this.$message.success('发表留言成功');
            } else {
              this.$message.error('发表失败，请重试');
            }
    
        } catch (error) {
            console.error('添加评论失败:', error);
            // 错误处理
        }
    },
      },
    };
    </script>
    
    <style scoped>
    
    
    /* 禁止整个页面的滚动条 */
    html, body {
      overflow: hidden; 
      margin: 0; /* 清除默认的页边距 */
      height: 100%; /* 确保页面高度充满整个视口 */
    }
    
    .container {
      display: flex;
    flex-direction: column; /* 保证子组件竖直排列 */
      /* overflow-y: auto; 仅容器部分启用滚动条 */
      height: 80vh; /* 容器高度占页面80% */
    }
    
    
    .comment-head {
      flex-shrink: 0; /* 固定头部高度 */
      margin-bottom: 10px;
    }
    
    .comment-list {

      flex: 1;
      overflow-y: auto; /* 留言部分有滚动条 */
      padding-right: 10px; /* 解决滚动条占用空间时内容偏移的问题 */
    }
    

    </style>
    